<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-18 09:40:22
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-10 19:35:00
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\line.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="text">
        <view class="list">
            <view class="li-left">
                <view class="li-l-t">
                    <view class="li-l-t-t">{{ items.name }}</view>
                </view>
                <view class="firstflight">
                    <view>首班:
                        {{ formatTime(items.lineFristTime, 'HH:mm') }}
                    </view>
                    <view>末班:
                        {{ formatTime(items.lineLastTime, 'HH:mm') }}
                    </view>
                </view>
            </view>
            <view class="li-contain">
                <view class="li-c-top">
                    <view class="li-c-dirction">
                        {{ items.direction }}
                    </view>
                    <view class="li-right">
                        <view>{{ lastNaem }} </view>
                        <!-- <view>{{ lastZhan }} </view> -->
                    </view>
                </view>
                <view class="li-c-bottom">
                    <view class="arrow">
                        <view class="right-arrow"> </view>
                    </view>
                    <view class="line">
                    </view>
                    <view class="li-c-box">
                        <view v-if="data" class="boda">
                            <view v-for="(item, index) in data" :key="item.id" :class="[
                                'li-c-b-l',
                                {
                                    actives: item.pointId == items.pointId,
                                },
                            ]">
                                <view class="gongBox" v-if="isVericel(index)">
                                    <image class="gongjiao" src="@/static/gongjiao.png">
                                    </image>                                 
                                </view>
                                <view class="doc">
                                </view>
                                <view class="texts-box">
                                    <view class='texts'>
                                        {{ item.pointName }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { mapGetters } from 'vuex';
dayjs.extend(customParseFormat);

export default {
    props: {
        items: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            lastZhan: '等待发车',
            lastNaem: "等待发车",
            currents: undefined,
            broadTimeout: null,
            // 所有的报站的车辆数据
            verTicl: [],
            data: [],
            code: '',
            dadaInfo: [],
            imgBase64URL: ''
        };
    },
    computed: {
        lastPointName() {
            return this.items.lineNodeList?.slice(-1)[0]?.pointName || '未知站点';
        },
        ...mapGetters({
            // 假设Vuex store中有一个名为'myData'的状态
            myGetterData: 'getreceiveUserName',
        }),
        current() {
            const { pointId: pointId = '', lineNodeList: nodeList = [] } = this.items || {};

            // 空值快速返回
            if (!pointId || nodeList.length === 0) return -1;

            console.log(this.items, '我会死几个啊')
            // 精确查找逻辑
            return nodeList.findIndex((item) => item?.pointId === pointId);
        },
        lastNaems() {

        }
    },
    created() {
        console.log(this.items.code, '我十四个id吗')
        this.data = this.items.lineNodeList.map((item) => {
            return {
                ...item,
                isverTicl: false
            }
        })

        this.$emit('register', {
            id: this.items.code,
            method: this.init.bind(this)
        }) // 触发自定义事件

    },
    methods: {
        init(info) {
            this.start()
            this.dadaInfo = info
            for (let index = 0; index < info.length; index++) {
                const item = info[index];
                if (item.distance == 0) {
                    this.data[item.distance].isverTicl = true
                }
            }
            this.lastNaem = info.display.name
            info.current.forEach(item => {
                this.verTicl.push(item.stationIndex)
                this.data[item.stationIndex].isverTicl = true
            });
            console.log(info.current, '我是对应的车辆下标')
            console.log(info, '我是对应的字方法')
        },
        // 是否高亮显示车辆
        isVericel(index) {
            if (this.verTicl.includes(index)) {
                return true
            } else {
                return false
            }
        },
        claer() {
            console.error(this.data, this.verTicl, '我是清楚竹签的data数据')
            for (let i = 0; i < this.verTicl.length; i++) {
                console.error(this.verTicl[i], '我清楚了开始我是下标')
                if (this.verTicl[i] >= this.data.length - 1) {
                    continue
                }
                this.data[this.verTicl[i]].isverTicl = false
            }
            this.verTicl = []
        },
        //  开启定时器 2分钟后清掉
        start() {
            if (this.broadTimeout) {
                this.claer()
                this.claerBroad()
            }
            this.broadTimeout = setTimeout(() => {
                this.lastNaem = '等待发车'
                this.claer()
                this.claerBroad()
                console.log('清除定时器')
            }, 120000)
        },
        claerBroad() {
            clearTimeout(this.broadTimeout)
            this.broadTimeout = null
        },
        claerBoth() {
            for (let i = 0; i < this.verTicl.length; i++) {
                this.data[this.verTicl[i]].isverTicl = false
            }
            this.verTicl = []
            if (this.broadTimeout) {
                this.claerBroad()
            }
        },
        formatTime(time, format) {
            return dayjs(time, 'HH:mm').format(format);
        },
        findName(stations) {
            // 检查是否所有元素的 indexs 都为 0
            const allZero = stations.every(item => item.indexs == 0);
            if (allZero) {
                // 返回所有下标组成的数组
                return stations.find(item => item.indexs == 0);
            }

            // 提取非零的 indexs 并找到最小值
            const nonZeroValues = stations.map(item => item.indexs).filter(num => num != 0);
            const minNonZero = Math.min(...nonZeroValues);

            // 找到第一个出现最小非零值的下标
            const firstInd = stations.find(item => item.indexs == minNonZero);
            return firstInd;
        },
    },
};
</script>

<style lang="scss" scoped>
.text {
    width: 100%;
    // max-height: 155rpx;
    height: 215rpx;
    // max-height: 180rpx;
    overflow: hidden;
    margin-bottom: 2rpx;
    font-size: 30rpx;

    text-align: center;
    // background-image: linear-gradient(to bottom, #024ad0 45%, #0b138b 100%);
    background: #ffffff;
}

.list {
    display: flex;
    height: 100%;
    font-size: 18rpx;
    color: #fff;
    text-align: left;
}




.li-left {
    width: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #68a1fb;

    .leaverName {
        font-size: 16rpx;
    }

    .firstflight {
        font-size: 18rpx;
    }

    .li-l-t {
        flex: 1;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .li-l-t-t {
            font-size: 23rpx;
        }
    }

    .leavefor {
        color: red;
        font-size: 16rpx;
    }
}

.li-contain {
    flex: 1;

    .li-c-top {
        padding: 0rpx 12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .li-c-dirction {
            padding: 0rpx 8rpx;
            height: 30rpx;
            background: #0f0f10;
            border-radius: 20rpx;
            line-height: 30rpx;
            color: #ffffff;
        }

        .li-right {
            // width: 120rpx;
            color: red;
            text-align: right;
        }
    }

    .li-c-bottom {
        position: relative;
        padding: 0rpx 12rpx;

        .arrow {
            width: 100%;
            left: 20px;
            right: 20px;
            margin-bottom: 14rpx;

            .right-arrow {
                position: relative;
                width: 100%;
                height: 20rpx;
                /* 增加高度以便更清楚地看到效果 */
                clip-path: polygon(0 40%, calc(100% - 44px) 30%, calc(100% - 44px) 0%, 100% 60%, calc(100% - 20px) 60%, 0 60%);
                /* 箭头颜色 */
                background: #68a1fb;
            }
        }

        .line {
            position: absolute;
            top: 36rpx;
            right: 14rpx;
            left: 14rpx;
            height: 4rpx;
            background-color: #68a1fb;
            border-radius: 4rpx;
        }


        .li-c-box {
            position: relative;



            .boda {
                display: flex;
                justify-content: space-between;
                margin-top: 8rpx;

                .li-c-b-l {

                    position: relative;
                    display: inline-flex;
                    height: 100%;
                    flex-direction: column;
                    align-items: center;

                    .gongBox {
                        position: absolute;
                        width: 20rpx;
                        height: 20rpx;
                        top: -20rpx;
                        left: -6rpx;

                        .gongjiao {
                            width: 20rpx;
                            height: 20rpx;
                        }
                    }

                    .doc {
                        margin: 0 auto;
                        position: relative;
                        width: 8rpx;
                        height: 8rpx;
                        background-color: #fff;
                        border-radius: 50%;
                        border: 2rpx solid #0f3c73;
                    }

                    .texts-box {
                        margin-top: 8rpx;
                        flex: 1;
                        overflow: hidden;

                        .texts {
                            width: 11rpx;
                            color: #0d0e0e;
                            font-size: 11rpx;
                            line-height: 11rpx;
                            // text-align: justify;
                            text-align: justify;
                            writing-mode: vertical-rl;
                            text-orientation: upright;
                            writing-mode: vertical-rl;
                            text-orientation: upright;
                            white-space: nowrap;
                        }
                    }
                }

                .actives {
                    .doc {
                        border: 2rpx solid red;
                        background-color: red;
                    }

                    .texts-box {
                        .texts {
                            background: #e0272d;
                            color: #ffffff;
                            background: #e0272d;
                            border-radius: 8rpx;
                            padding: 6rpx 0rpx;
                        }
                    }

                }
            }
        }
    }
}


.li-left,
.li-right {

    // width: 140rpx;
    padding: 6rpx 4rpx;
    text-align: center;
    // background-color: #ffae00;
}



.li-center {
    position: relative;
    flex: 1;
    padding: 0 12rpx;
    overflow: hidden;
}
</style>